<template>

<!--备注修改弹窗-->

  <el-dialog
      v-model="dialogFormVisible"
      title="修改备注"
      width="500"
      align-center
  >
    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="remarkInfo"
        :rules="dialogFormRules"
        label-width="auto"
    >
      <el-form-item label="修改备注" prop="remarkInfo">
        <el-input v-model="remarkInfo" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false; remarkIdFlag='' ">取消</el-button>
        <el-button type="primary" @click="submitRemark">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--转换客户弹窗-->

  <el-dialog
      v-model="convertClientDialog"
      title="线索转换客户"
      width="800"
      center
  >
    <el-form
        ref="convertClient"
        style="max-width: 600px"
        :model="convertClientMode"
        :rules="convertClientRules"
        label-width="auto"
    >
      <el-form-item label="意向产品" prop="intentionProduct">
        <el-select
            v-model="convertClientMode.intentionProduct"
            clearable
            placeholder="请选择意向产品"
            style="width: 100%"
        >
          <el-option
              v-for="item in productSelect"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="客户描述" prop="description">
        <el-input type="textarea" rows="8" v-model="convertClientMode.description" />
      </el-form-item>
      <el-form-item label="下次联系时间" prop="nextContactTime">
        <el-date-picker
            v-model="convertClientMode.nextContactTime"
            type="datetime"
            style="width: 100%"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择活动结束时间"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="convertClientDialog = false; ">取消</el-button>
        <el-button type="primary" @click="convertClientSubmit">
          转换客户
        </el-button>
      </div>
    </template>
  </el-dialog>


<!-- ------------------------------------------------------------------------------------------ -->

    <el-form
    style="max-width: 600px"
    :model="clueDetailMode"
    label-width="auto"
    class="demo-ruleForm"
    status-icon
  >

    <el-form-item label="活动所属人">
      <el-input v-model="clueDetailMode.ownerName" disabled/>
    </el-form-item>

    <el-form-item label="活动名称">
      <el-input v-model="clueDetailMode.activityName" disabled/>
    </el-form-item>

    <el-form-item label="姓名">
      <el-input :model-value="clueDetailMode.fullName" disabled/>
    </el-form-item>

    <el-form-item label="称呼">
      <el-input :model-value="clueDetailMode.appellationName" disabled/>
    </el-form-item>

    <el-form-item label="手机号">
      <el-input :model-value="clueDetailMode.phone" disabled/>
    </el-form-item>

    <el-form-item label="微信号">
      <el-input :model-value="clueDetailMode.weixin" disabled/>
    </el-form-item>

    <el-form-item label="QQ号">
      <el-input v-model="clueDetailMode.qq" disabled/>
    </el-form-item>

    <el-form-item label="邮箱">
      <el-input v-model="clueDetailMode.email" disabled/>
    </el-form-item>

    <el-form-item label="年龄">
      <el-input v-model="clueDetailMode.age" disabled/>
    </el-form-item>

    <el-form-item label="职业">
      <el-input v-model="clueDetailMode.job" disabled/>
    </el-form-item>

    <el-form-item label="年收入">
      <el-input v-model="clueDetailMode.yearIncome" disabled/>
    </el-form-item>

    <el-form-item label="地址">
      <el-input v-model="clueDetailMode.address" disabled/>
    </el-form-item>


    <el-form-item label="是否需要贷款">
      <el-input v-model="clueDetailMode.needLoanInfo" disabled/>
    </el-form-item>

    <el-form-item label="意向状态">
      <el-input v-model="clueDetailMode.istateInfo" disabled/>
    </el-form-item>

    <el-form-item label="意向产品">
      <el-input v-model="clueDetailMode.iproductInfo" disabled/>
    </el-form-item>

    <el-form-item label="线索状态">
      <el-input v-model="clueDetailMode.stateInfo" disabled/>
    </el-form-item>

    <el-form-item label="线索来源">
      <el-input v-model="clueDetailMode.sourceInfo" disabled/>
    </el-form-item>

    <el-form-item label="线索描述">
      <el-input v-model="clueDetailMode.description" disabled/>
    </el-form-item>

    <el-form-item label="下次联系时间">
      <el-input v-model="clueDetailMode.nextContactTime" disabled/>
    </el-form-item>

    <el-form-item label="创建时间">
      <el-input v-model="clueDetailMode.createTime" disabled/>
    </el-form-item>

    <el-form-item label="创建人">
      <el-input v-model="clueDetailMode.createName" disabled/>
    </el-form-item>


    <el-form-item label="编辑时间">
      <el-input v-model="clueDetailMode.editTime" disabled/>
    </el-form-item>


    <el-form-item label="编辑人">
      <el-input v-model="clueDetailMode.editName" disabled/>
    </el-form-item>



    <el-form-item label="填写跟踪记录" prop="note_content" >
      <el-input type="textarea" v-model="clueRemark.noteContent" placeholder="请输入跟踪记录"/>
    </el-form-item>


      <el-form-item label="选择跟踪方式" >
        <el-select v-model="clueRemark.noteWay" placeholder="请选择跟踪方式" style="width: 240px">
          <el-option
              v-for="item in noteWaySelect"
              :key="item.id"
              :label="item.label"
              :value="item.typeValue"
          />
        </el-select>
      </el-form-item>


    <el-form-item>
      <el-button type="primary" size="large"  @click="submitRemark">提交跟踪记录</el-button>
      <el-button v-if="clueDetailMode.state !== -1" type="success" size="large"  @click="convertClient">转换客户</el-button>
      <el-button type="success" size="large" plain @click="goBack">点击返回</el-button>
    </el-form-item>
  </el-form>

  <!--备注历史列表-->
  <el-table :data="clueRemarkList" height="250" style="width: 100%">
    <el-table-column type="index" label="序号" width="80"/>
    <el-table-column property="noteContent" label="备注内容" />
    <el-table-column property="createTime" label="备注时间" />
    <el-table-column property="typeValue" label="跟踪方式" />
    <el-table-column property="createName" label="备注人" />
    <el-table-column property="editTime" label="编辑时间" />
    <el-table-column property="editName" label="编辑人" />
    <el-table-column label="操作">
      <!--使用插槽获取用户信息-->
      <template #default="scope">
        <el-button type="primary" circle @click="edit(scope.row.id)">改</el-button>
        <el-button type="danger" circle @click="del(scope.row.id)">删</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      class="page"
      :page-size=pageSize
      :hide-on-single-page=true
      :total=total
      @current-change="page"
      @prev-click="page"
      @next-click="page"
      layout="prev, pager, next"
  />

</template>


<script >

import {doDelete, doGet, doPost, doPut} from "@/http/httpRequest";
import {confirmMessageTip, goBack, messageTip} from "@/util/utils";

  export default {
    name:"MarketActivityDetailView.vue",
    data(){
      return{
        clueDetailMode :{},
        clueRemark:{},
        currentInput : '',
        clueRemarkList:[],
        pageSize : 0,
        total:0,
        dialogFormVisible:false,
        remarkInfo:'',
        remarkIdFlag:'',
        noteWaySelect:[],
        productSelect:[],
        convertClientDialog: false,
        convertClientMode:{},
        dialogFormRules:{
          remarkInfo:[
            {required:true, message: "请输入", trigger:'blur'}
          ]
        },
        convertClientRules:{
          intentionProduct:[
            {required:true, message: "请输入意向产品", trigger:'blur'}
          ],
          description:[
            {required:true, message: "请输入客户描述", trigger:'blur'}
          ],
          nextContactTime:[
            {required:true, message: "请输入下次联系时间", trigger:'blur'}
          ]
        },

      }
    },
    inject:["reload"],
    methods: {
      page(number) {
        this.getRemark(this.$route.params.id, number)
      },
      /**
       * 加载线索详情
       */
      loadClue(clueId) {
        doGet("api/clueDetail/" + clueId, {}).then(res => {
          if (res.data.code === 200) {
            this.clueDetailMode = res.data.data;
          }
        })
      },

      goBack,
      /**
       * 输入备注检查
       * @returns {boolean}
       */
      submitRemarkCheck() {
        if (this.clueRemark.noteContent === ''|| this.clueRemark.noteContent === undefined) {
          return true;
        }
      },
      /**
       * 提交备注
       */
      submitRemark() {
        if (this.remarkIdFlag === '') {
          //新增
          if (this.submitRemarkCheck()) {

            //不合法的提交
            messageTip("请输入有效内容", "warning")
            return;
          }
          this.clueRemark.clueId = this.clueDetailMode.id;
          console.log(this.clueRemark)
          //添加数据
          doPost("api/addClueRemark", this.clueRemark).then(res => {
            if (res.data.code === 200) {
              messageTip("添加成功", "success")
              this.reload();
            } else {
              messageTip("添加失败", "error")
            }
          });
        } else {
          //修改
          doPut("api/updateRemark",{id:this.remarkIdFlag,noteContent:this.remarkInfo}).then(res =>{
            if (res.data.code === 200){
              messageTip("修改成功", "success")
             this.reload()
            }
          })
        }
      },
      /**
       * 转换客户
       */
      convertClient() {
        this.convertClientDialog = true;
        doGet("api/loadProductSelect",{}).then(res =>{
          if (res.data.code === 200) {
            this.productSelect = res.data.data
          }
        })
      },
      /**
       * 转换客户的提交
       */
      convertClientSubmit(){
        this.convertClientMode.clueId = this.clueDetailMode.id
        this.$refs.convertClient.validate(valid =>{
          if (valid){
            doPost("api/convertClientSubmit",this.convertClientMode).then(res =>{
              if (res.data.code === 200) {
                messageTip("转换客户成功", "success")
                this.reload();
              }else {
                messageTip("转换失败", "error")
              }
            })
          }
        })

      },
      getRemark(clueId,current) {
        console.log("发送了")
        doGet("api/getClueRemark", {
          clueId : clueId,
          current : current
        }).then(res => {
          if (res.data.code === 200) {
            //集合
            this.clueRemarkList = res.data.data.list;
            this.total = res.data.data.total;
            this.pageSize = res.data.data.pageSize;
          }
        })
      },
      getNoteWayDic(typeCode) {
        doGet("api/loadDicSelect",{
          select:typeCode
        }).then(res => {
          this.noteWaySelect = res.data.data;
        })

      },
      //修改备注内容
      edit(remarkId) {
        this.dialogFormVisible = true;
        this.remarkIdFlag = remarkId;
        console.log(remarkId)
        //获取备注
        console.log(JSON.stringify(this.clueRemarkList))
        this.clueRemarkList.forEach((clueRemark) =>{
          if (clueRemark.id === remarkId){
            this.remarkInfo = clueRemark.noteContent;
          }
        })
      },
      //删除指定备注内容
      del(clueRemarkId) {
        confirmMessageTip("确定要删除本条消息吗").then(() =>{
          //删除
          clueRemarkId
          doDelete("api/logicDeleteClueRemark",{
            clueRemarkId:clueRemarkId
          })
        }).catch(() => {
          //取消
        })
      },
      test(){
        console.log(this.$refs.ruleFormRef.validate())
      }
    },
    mounted() {
      this.loadClue(this.$route.params.id)
      //获取备注列表
      this.getRemark(this.$route.params.id, 1);
      //获取跟踪方式字典值
      this.getNoteWayDic("noteWay");
    },
  }
</script>


<style scoped>
.page{
  display: flex;
  justify-content: center;
}
</style>